<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="icon" href="./images/logoWeb.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">


<title></title>

<style type="text/css">
.button {
	display: flex;
	width: 100%;
	height: 100px;
	justify-content: center;
	align-items: center;
}
</style>
</head>
<body>

	<div id="app">
		<div class="m-2">

			<form class="form-inline mb-2 mt-2">
				<div class="input-group mr-2 input-group-sm">
					<div class="input-group-prepend">
						<span class="input-group-text" id="basic-addon1">学号</span>
					</div>
					<input @keyup="getGradeList(1)" v-model="query.s_no" type="text"
						class="form-control" placeholder="请输入学号">
				</div>

				<div class="input-group mr-2 input-group-sm">
					<div class="input-group-prepend">
						<span class="input-group-text" id="basic-addon1">姓名</span>
					</div>
					<input v-model="query.s_name" type="text" class="form-control"
						placeholder="请输入姓名">
				</div>

		

				<div class="input-group mr-2">
					<button @click="getGradeList(1)" type="button"
						class="btn btn-primary btn-sm">
						<i class="fa fa-search" aria-hidden="true"></i> 查询
					</button>
				</div>

			</form>

			<button @click="openAddWin" type="button" class="btn btn-primary">
				<i class="fa fa-plus" aria-hidden="true"></i> 新增
			</button>

			<button @click="execMutiDel" type="button" class="btn btn-danger">
				<i class="fa fa-trash-o" aria-hidden="true"></i> 删除
			</button>

		</div>
		<table class="table">
			<thead class="thead-dark">
				<tr>
					<th scope="col">选择</th>
					<th scope="col">学号</th>
					<th scope="col">姓名</th>
					<th scope="col">班级</th>
					<th scope="col">语文</th>
					<th scope="col">数学</th>
					<th scope="col">英语</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in page.list">
					<td>
						<!-- :value  动态的值 ，多选框应该绑定一个数组：idArr --> <input type="checkbox"
						:value="item.id" v-model="idArr">
					</td>
					<td>{{item.s_no}}</td>
					<td>{{item.s_name}}</td>
					<td>{{item.s_class}}</td>
					<td>{{item.s_chinese}}</td>
					<td>{{item.s_math}}</td>
					<td>{{item.s_english}}</td>
					<td>
						<button @click="openUpdWin(item)" type="button"
							class="btn btn-primary btn-sm">
							<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
						</button>
						<button @click="execDelete(item.id)" type="button"
							class="btn btn-danger btn-sm">
							<i class="fa fa-trash-o" aria-hidden="true"></i>
						</button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<!-- 分页开始 -->
		<nav style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
		  <ul class="pagination pagination-sm">
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getGradeList(1)">第一页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getGradeList(page.previous)">上一页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getGradeList(page.next)">下一页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getGradeList(page.last)">最后一页</a></li>
		  </ul>
		   <ul class="pagination pagination-sm">
		    <li class="page-item">
		    	当前第{{page.pageIndex}}页{{page.size}}条记录，共{{page.pages}}页{{page.total}}条记录
		    </li>
		  </ul>
		</nav>
		<!-- 分页结束 -->
		
		<!-- 修改窗口开始 -->
		<form class="form-inline mt-4">
			<div id="win-upd" style="display: none; padding: 15px;">
				<!-- 信息输入开始 -->
				<div class="form-group mb-4 ml-3 mt-4">
					<label class="mr-4">学号</label> <input v-model="updData.s_no"
						placeholder="请输入学号" type="text" class="form-control mr-5">
					<label class="mr-4">姓名</label> <input v-model="updData.s_name"
						placeholder="请输入姓名" type="text" class="form-control">
				</div>
				<div class="form-group mb-4 ml-3">
					<label class="mr-4">语文</label> <input v-model="updData.s_chinese"
						placeholder="请输入语文" type="text" class="form-control mr-5">
					<label class="mr-4">数学</label> <input v-model="updData.s_math"
						placeholder="请输入数学" type="text" class="form-control">
				</div>
				<div class="form-group mb-4 ml-3">
					<label class="mr-4">班级</label> <input v-model="updData.s_class"
						placeholder="请输入班级" type="text" class="form-control mr-5">
					<label class="mr-4">英语</label> <input v-model="updData.s_english"
						placeholder="请输入英语" type="text" class="form-control">
				</div>
				<!-- 信息输结束 -->
				<div class="button">
					<button @click="execUpd" type="button"
						class="btn btn-primary btn-lg">提交</button>
				</div>
			</div>
		</form>
		<!-- 修改窗口结束 -->

		<!-- 新增窗口开始 -->
		<form class="form-inline">
			<div id="win-add" style="display: none; padding: 15px;">
				<!-- 信息输入开始 -->
				<div class="form-group mb-4 ml-3 mt-4">
					<label class="mr-4">学号</label> <input v-model="addData.s_no"
						placeholder="请输入学号" type="text" class="form-control mr-5">
					<label class="mr-4">姓名</label> <input v-model="addData.s_name"
						placeholder="请输入姓名" type="text" class="form-control">
				</div>
				<div class="form-group mb-4 ml-3">
					<label class="mr-4">语文</label> <input v-model="addData.s_chinese"
						placeholder="请输入语文" type="text" class="form-control mr-5">
					<label class="mr-4">数学</label> <input v-model="addData.s_math"
						placeholder="请输入数学" type="text" class="form-control">
				</div>
				<div class="form-group mb-4 ml-3">
					<label class="mr-4">班级</label> <input v-model="addData.s_class"
						placeholder="请输入班级" type="text" class="form-control mr-5">
					<label class="mr-4">违纪</label> <input v-model="addData.s_english"
						placeholder="请输入英语" type="text" class="form-control">
				</div>
				<!-- 信息输结束 -->
				<div class="button">
					<button @click="execAdd" type="button" class="btn btn-dark btn-lg">提交</button>
				</div>
			</div>
		</form>
		<!-- 新增窗口结束 -->
	</div>
	
	
	<script src="./js/jquery.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./layer/layer.js"></script>
	<script src="./js/sweetalert2.all.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/vue.min.js"></script>
	<script src="./js/request.js"></script>

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				query:{ //查询条件
					pageIndex:1,  //页码
					pageSize:10,  //每页记录数
					s_no:'',
					s_name:'',
					s_class:''
				},
				//page对象内容来源于服务器，该数据是经过服务器处理的，一定是合理的
				page:{},  //定义分页对象，其中list（本页数据集合）、previous（上一页）、next（下一页）等属性
				//list:[], //定义一个数组对象，用于存放前端发来的数据
				idArr:[],   //存放选中行的数组
				addData:{
					s_name:'',
					s_no:'',
					s_chinese:'',
					s_math:'',
					s_class:'',
					s_english:''
				},
				updData:{},
				addWinInx:null,
				updWinInx:null
				
			},
			methods:{
				getGradeList(pageIndex=1){
					this.query.pageIndex = pageIndex;
					//访问服务器，通过get请求访问服务器地址depList获取数据
					//data是服务器回送的数据
					http_get('GradeList',this.query).then((data)=>{
						this.page = data;
						this.query.pageIndex = this.page.pageIndex;
						this.query.pageSize = this.page.pageSize;
					})
				},
				//打开新增窗口
				openAddWin(){
					this.addData = {}
					this.addWinInx = layer.open({
						type:1,
						content:$('#win-add'),
						area:['700px','500px'],
						title:"新增学籍信息",
						zIndex:1000,
					});
				},
				//新增数据
				execAdd(){
					if(this.addData.s_name==null||this.addData.s_no==null||this.addData.s_class==null){
						Swal.fire({
							  type: 'error',
							  text: '学号、姓名或班级为空',
							  showConfirmButton:false,
							  toast:true,
							  timer:1500
							})
							return;
					}
					//访问服务器，通过post请求访问服务器地址depDoAdd增加数据
					http_post('doGradeAdd',this.addData).then(()=>{
						this.getGradeList(this.page.last+1)
						layer.close(this.addWinInx);//关闭新增提示窗口
						
					})
				},
				//打开修改窗口
				openUpdWin(item){
					//this.updData = item  //给修改数据赋值
					this.updData = {   //将item数据创建一个副本
							id:item.id,
							s_name:item.s_name,
							s_no:item.s_no,
							s_chinese:item.s_chinese,
							s_math:item.s_math,
							s_class:item.s_class,
							s_english:item.s_english
					};
					this.updWinInx = layer.open({
						type:1,
						content:$('#win-upd'),
						area:['700px','500px'],
						title:"修改学籍信息",
						zIndex:1000,
					});
				},
				//执行修改
				execUpd(){
					//访问服务器，通过post请求访问服务器地址depDoUpd修改数据
					http_post('doGradeUpd',this.updData).then(()=>{
						this.getGradeList(this.page.pageIndex)
						layer.close(this.updWinInx);//关闭提示窗口
						
					})
				},
				//执行删除
				execDelete(id){
					Swal.fire({
						  title: '您确定要删除吗？',
						  text: "数据一旦删除，将不可恢复！",
						  type: 'warning',
						  showCancelButton: true,
						  confirmButtonColor: '#3085d6',
						  cancelButtonColor: '#d33',
						  confirmButtonText: '删除',
						  cancelButtonText: '取消',
						}).then((result) => {
						  if (result.value) {
							  http_post('doDeleteGrade',{id:id}).then(()=>{
								  this.getGradeList(this.page.pageIndex)
								});
						  }
						})
				},
				//执行多删除
				execMutiDel(){
					if(this.idArr.length==0){
						Swal.fire({
							  type: 'error',
							  title: '请选择删除数据',
							  showConfirmButton: false,
							  timer: 1500,
							  toast:true,   //显示小型窗口
							  customClass:{
								  title:'text-danger'
							  }
							})
							return;
					}
					Swal.fire({
						  title: '您确定要删除选择信息吗？',
						  text: "数据一旦删除，将不可恢复！",
						  type: 'warning',
						  showCancelButton: true,
						  confirmButtonColor: '#3085d6',
						  cancelButtonColor: '#d33',
						  confirmButtonText: '删除',
						  cancelButtonText: '取消',
						}).then((result) => {
						  if (result.value) {
							  http_post('doMultiGrade',{ids:this.idArr}).then(()=>{
								  this.getGradeList(this.page.pageIndex)
								});
						  }
						})
				},
			},
			//该方法在vue将绑定的元素渲染之后，就立即执行
			mounted(){
				this.getGradeList(1)
			}
		})
	</script>
</body>
</html>